<template>
    <div>
        <h2>汽车信息:</h2>
        <h3>汽车品牌：{{car.brand}}</h3>
        <h3>汽车价格：{{car.price}}</h3>
        <button @click="changePrice">修改汽车价格</button>
        <button @click="changeBrand">修改汽车品牌</button>
        <button @click="changeCar">修改汽车</button>
        <hr/>
        <h2>当前求和为：{{ sum }}</h2>
        <button @click="changeSum">点我sum+1</button>
    </div>
</template>

<script setup lang="ts" name="Person">
import {reactive, ref} from "vue";
// 使用reactive定义的响应式对象，当替换整个对象时，需要使用Object.assign这个api，
// 但是ref定义的响应式对象可以直接替换
let car = reactive({
    brand: '奔驰',
    price: 100
})
let sum = ref(0)
function changeBrand() {
    car.brand = '雅迪'
}
function changePrice() {
    car.price += 10
}
function changeCar() {
    Object.assign(car,{brand: '哈哈哈',price: '1900'})
}
function changeSum() {
    sum.value += 1
}

</script>

<style scoped>

</style>
